<!--  -->
<template>
<div class="footer_top">
    <div class="bot">
       <div class="biao">相关链接：</div>
        <div class="links">
          <div class="one">
            <p>国家公共文化云</p>
            <p>北京数字文化馆</p>
            <p>北京市文旅局</p>
            <p>首都图书馆</p>
          </div>
          <div class="two">
            <p>北京市博物馆</p>
            <p>顺义区文旅局</p>
            <p>顺义博物馆</p>
            <p>顺义图书馆</p>
          </div>
        </div>
        <div class="ma">
          <img src="../../assets/image/微信图片_20191112142009.png" alt="" />
          <img src="../../assets/image/微信图片_20191112142009.png" alt="" />
        </div>
      </div>
    <div class="footer_bot">
      <img src="../../assets/image/文化馆logo.png" alt="" />
      <div class="right">
        <p>联系我们：010-28123341</p>
        <p>地址：北京市顺义区光明南街22号</p>
        <p>
          版权所有 ©北京市顺义区文化馆 &emsp; 全案技术支持：迦尼集团旗下易龙天
          &emsp;京ICP备16037312号-1
        </p>
      </div>
    </div>
</div>
</template>

<script>
export default {
data() {
return {

}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

}
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.bot {
      width: 72.9%;
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      .links {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 53.07%;
        .one {
          display: flex;
          justify-content: space-between;
          width: 100%;
          p {
            background-image: url("../../assets/image/图层 52 拷贝 9.png");
            text-align: center;
            line-height: 30px;
            width: 17.93%;
            height: 30px;
          }
        }
        .two {
          display: flex;
          justify-content: space-between;
          width: 100%;
          p {
            background-image: url("../../assets/image/图层 52 拷贝 9.png");
            background-size: 100% 100%;
            text-align: center;
            line-height: 30px;
            width: 17.93%;
            height: 30px;
          }
        }
      }
    }
    .footerBox {
  width: 100%;
  height: 632px;
  bottom: 0;
  .footer_top {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 75.63%;
    .backinner {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      width: 72.9%;
      height: 294px;
      background-image: url("../../assets/image/图层 623.png");
      background-size: 100% 100%;
      .openingtime {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        height: 174px;
        border-right: 1px solid white;
        .top {
          color: white;
        }
        p {
          width: 65.78%;
          color: white;
        }
      }
      .visittime {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        height: 174px;
        border-right: 1px solid white;
        .top {
          color: white;
        }
        p {
          width: 65.78%;
          color: white;
        }
      }
      .contactinformation {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        height: 174px;
        border-right: 1px solid white;
        .top {
          color: white;
        }
        p {
          width: 65.78%;
          color: white;
        }
      }
      .activity {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        height: 174px;
        .top {
          color: white;
        }
        p {
          width: 65.78%;
          color: white;
        }
      }
    }
    
  }
 
}
 .footer_bot {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 153px;
    background-color: #f28623;
    img {
      // height: 56px;
      width: 12.39%;
      margin-left: 200px;
    }
    .right {
      width: 60%;
      height: 60%;
      display: flex;
      flex-direction:column;
      p {
		line-height: 30px;
        text-align: center;
        width: 53%;
        height: 30px;
		color: white;
      }
    }
  }
</style>